//导入模块
import QtQuick 2.6
import QtQuick.Window 2.2
//控件的导入模块
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //Item是所有可视窗口的基类，虽然他自己什么都不绘制，但是他定义了图元所需要的大部分通用属性，比如x, y,z, width ,height,锚点(anchoring),按键处理，以及透明度等
    Item{
        id: root
        //填充父级
        anchors.fill: parent
        states: [
            State { name: "activated" },
            State { name: "deactivated" }
        ]
 
        Component.onCompleted: 
        {
            console.log("Name of first state:", states[0].name)
            for (var i = 0; i < states.length; i++)
                console.log("state", i, states[i].name)
        }
        //列布局
        // ColumnLayout{
        //     RadioButton{
        //         checked: true
        //         text: '苹果'
        //     }
        //     RadioButton{
        //         text: '西瓜'
        //     }
        //     RadioButton{
        //         text: '菠萝'
        //     }
        //     RadioButton{
        //         text: '草莓'
        //     }
        //     RadioButton{
        //         text: '橙子'
        //     }
        // }
        //行布局
        // RowLayout{
            
        //     Button{
        //         text: '按钮1'
        //     }
        //     Button{
        //         text: '按钮2'
        //     }
        //     Button{
        //         text: '按钮3'
        //     }
        // }
        // //流式布局
        // Flow{
        //     Rectangle{
        //         height: 100
        //         width: root.width/2
        //         color: 'red'
        //     }
        //     Rectangle{
        //         height: 100
        //         width: root.width/2
        //         color: 'yellow'
        //     }
        // }
        Grid {
              columns: 3
              spacing: 2
              Rectangle { color: "red"; width: 50; height: 50 }
              Rectangle { color: "green"; width: 20; height: 50 }
              Rectangle { color: "blue"; width: 50; height: 20 }
              Rectangle { color: "cyan"; width: 50; height: 50 }
              Rectangle { color: "magenta"; width: 10; height: 10 }
          }




    }
}